<template>
  <div class="form-container">
    <div class="row-container" >
      <h3>推荐模式选择</h3>
      <el-select v-model="pattern" filterable placeholder="请选择" @change="choosePattern(pattern)">
        <el-option

            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </div>


    <el-form :model="form" label-width="180px" style="margin-top: 4%">
      <el-row>
        <el-col :span="12">
          <el-form-item label="地址城市权重">
            <el-input v-model.number="form.address_city_point"></el-input>
          </el-form-item>
          <el-form-item label="地址城市区域权重">
            <el-input v-model.number="form.address_area_point"></el-input>
          </el-form-item>
          <el-form-item label="服务类型权重">
            <el-input v-model.number="form.service_type_point"></el-input>
          </el-form-item>
          <el-form-item label="服务时间权重">
            <el-input v-model.number="form.service_time_point"></el-input>
          </el-form-item>
          <el-form-item label="服务价格权重">
            <el-input v-model.number="form.service_price_point"></el-input>
          </el-form-item>
          <el-form-item label="服务年龄权重">
            <el-input v-model.number="form.service_age_point"></el-input>
          </el-form-item>
          <el-form-item label="服务人数权重">
            <el-input v-model.number="form.service_people_point"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="服务时间范围值-正数权重">
            <el-input v-model.number="form.time_range_a"></el-input>
          </el-form-item>
          <el-form-item label="服务时间范围值-负数权重">
            <el-input v-model.number="form.time_range_m"></el-input>
          </el-form-item>
          <el-form-item label="服务价格范围值-正数权重">
            <el-input v-model.number="form.price_range_a"></el-input>
          </el-form-item>
          <el-form-item label="服务价格范围值-负数权重">
            <el-input v-model.number="form.price_range_m"></el-input>
          </el-form-item>
          <el-form-item label="服务人数范围值-正数权重">
            <el-input v-model.number="form.people_range_a"></el-input>
          </el-form-item>
          <el-form-item label="服务人数范围值-负数权重">
            <el-input v-model.number="form.people_range_m"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="updateWeights">更新权重</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>




    <el-form :model="recommend_num" label-width="180px">
      <el-form-item label="推荐数量" style="margin-top: 4%">
        <el-input v-model.number="recommend_num.result_recommend_num"></el-input>
      </el-form-item>
      <el-form-item label="用户历史事件数量">
        <el-input v-model.number="recommend_num.user_history_event_num"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="updateRecommendNum">更新权重</el-button>
      </el-form-item>
    </el-form>


  </div>
</template>


<script>
import axios from 'axios';

export default {
  data() {
    return {
      form: {
        address_city_point: 5,
        address_area_point: 1,
        service_type_point: 3,
        service_time_point: 0,
        service_price_point: 0,
        service_age_point: 1,
        service_people_point: 1,
        time_range_a: 2,
        time_range_m: 2,
        price_range_a: 30,
        price_range_m: 30,
        people_range_a: 5,
        people_range_m: 5,
      },
      recommend_num: {
        result_recommend_num: 5,
        user_history_event_num: 7
      },
      options: [{
        value: '兴趣匹配模式',
        label: '兴趣匹配模式'
      }, {
        value: '用户城市匹配模式',
        label: '用户城市匹配模式'
      }, {
        value: '服务时长匹配推荐模式',
        label: '服务时长匹配推荐模式'
      }, {
        value: '精准匹配推荐模式',
        label: '精准匹配推荐模式'
      }, {
        value: '多因素综合推荐模式',
        label: '多因素综合推荐模式'
      }],
      patternWeights: {
        '兴趣匹配模式': {
          address_city_point: 5,
          address_area_point: 1,
          service_type_point: 8, // 较高
          service_time_point: 8, // 较高
          service_price_point: 2, // 较低
          service_age_point: 1,
          service_people_point: 2, // 较低
          time_range_a: 2,
          time_range_m: 2,
          price_range_a: 30,
          price_range_m: 30,
          people_range_a: 5,
          people_range_m: 5,
        },
        '用户城市匹配模式': {
          address_city_point: 5,
          address_area_point: 5,
          service_type_point: 2,
          service_time_point: 2,
          service_price_point: 2,
          service_age_point: 1,
          service_people_point: 2,
          time_range_a: 2,
          time_range_m: 2,
          price_range_a: 30,
          price_range_m: 30,
          people_range_a: 5,
          people_range_m: 5,
        },
        '服务时长匹配推荐模式': {
          address_city_point: 2,
          address_area_point: 2,
          service_type_point: 2,
          service_time_point: 8,
          service_price_point: 2,
          service_age_point: 1,
          service_people_point: 2,
          time_range_a: 1,
          time_range_m: 1,
          price_range_a: 30,
          price_range_m: 30,
          people_range_a: 5,
          people_range_m: 5,
        },
        '精准匹配推荐模式': {
          address_city_point: 1,
          address_area_point: 1,
          service_type_point: 1,
          service_time_point: 1,
          service_price_point: 1,
          service_age_point: 1,
          service_people_point: 1,
          time_range_a: 1,
          time_range_m: 1,
          price_range_a: 1,
          price_range_m: 1,
          people_range_a: 1,
          people_range_m: 1
        },
        '多因素综合推荐模式': {
          // 可以根据需要综合设置各项权重
          address_city_point: 5,
          address_area_point: 1,
          service_type_point: 5,
          service_time_point: 5,
          service_price_point: 3,
          service_age_point: 2,
          service_people_point: 2,
          time_range_a: 2,
          time_range_m: 2,
          price_range_a: 5,
          price_range_m: 5,
          people_range_a: 3,
          people_range_m: 3
        }
      },


      pattern: '多因素综合推荐模式'
    };
  },
  methods: {
    updateWeights() {
      axios.post('http://192.168.31.210:5000/getUserRecommendWeight', this.form)
          .then(response => {
            console.log(response)
            this.$message.success("权重更新成功");
          })
          .catch(error => {
            this.$message.error("权重更新失败");
            console.error('权重更新失败', error);
          });
    },

    updateRecommendNum() {
      axios.post('http://192.168.31.210:5000/getUserRecommendCount', this.recommend_num)
          .then(response => {
            console.log(response)
            this.$message.success("权重更新成功");
          })
          .catch(error => {
            this.$message.error("权重更新失败");
            console.error('权重更新失败', error);
          });
    },

    choosePattern(item){
      console.log(item)
      this.form = { ...this.form, ...this.patternWeights[item] };

      console.log(this.form)
    }
  }
}
</script>

<style scoped>
.form-container {
  max-width: 800px;
  margin: 0 auto;
}

::v-deep .el-col-12 {
  width: 45%;
  margin-right: 5%;
}

.row-container {
  display: flex;
  align-items: center;
  margin-left: 10%;

}
.row-container h3 {
  margin-right: 20px;
}
</style>
